<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="css/index.css" />
        <link rel="stylesheet" href="css/swiper.css" />
        <link rel="stylesheet" href="css/mint.css">
    </head>
    <script src="js/serverUrl.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/mint.js"></script>
    <script src="js/moment.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
    <style type="text/css">
        .add{
            height: 25vw;
            width: 25vw;
            background-color: lightblue;
            display: flex;
        }
        
        .gally{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            place-items: center;
        }
        .photo {
            width: 27vw;
            height: 27vw;
        }
        .image{
            width: 27vw;
            height: 27vw;
            margin-top: 6vw;
        }
        .photoConatiner{
            position: relative;
        }
        .del-image {
          position: absolute;
          top: 0px;
          right: 0px;
          width: 2vw;
          height: 2vw;
          padding: 1vw;
          background-color: red;
          border-radius: 2vw;
          }
    </style>
    <body>
        <div id="app">
            <div class="gally">
                <div class="photoConatiner"  v-for="(item,index) in imageList">
                    <img class="image" :style="{'margin-top': (index>2?'6vw':'0px')}"  :src="item" />
                    <img  class="del-image"
                          v-on:click="deleteImage(index)"
                          :style="{'top': (index>2?'6vw':'0px')}"
                          src=""/>
                </div>
                <img v-on:click="getImage()"
                     v-if="imageList.length < 9"
                     :style="{'margin-top': (imageList.length>3?'6vw':'0px')}"
                     class="image"
                     src="img/add_icon.png" />
                
            </div>
        </div>
        <script type="text/javascript">
               var app = new Vue({
                 el: '#app',
                 data: {
                  base64Data: "",
                  bookList: [],
                  imageList: []
                              
                 },
                 created () {
                     window.clear = this.clear
                     window.getImageList = this.getImageList
                     
                     let file = this.blobToFile(this.base64ToBlob(this.base64Data),"123")
                     let formData = new FormData()
                     formData.append("file",file)
                    
                     let url = "http://192.168.31.81:8079/jinneng_api/fileUpload/uploadFiles"
                    this.$http.post(url, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
                    .then(res => {
                        console.log(res.body)
                    })
            
                 },
                 methods:{
                     getImage () {
                        chooseImage(this.imageList.length)
                     },
                      getImageList (imageList) {
                         this.imageList = this.imageList.concat(imageList)
                     },
                     deleteImage (index) {
                         this.imageList.splice(index,1)
                     },
                     base64ToBlob(base64Data) {
                        let arr = base64Data.split(',')
                        let fileType = arr[0].match(/:(.*?);/)[1]
                        let bstr = atob(arr[1])
                        let l = bstr.length
                        let u8Arr = new Uint8Array(l)
                            
                        while (l--) {
                            u8Arr[l] = bstr.charCodeAt(l);
                        }
                        return new Blob([u8Arr], {
                            type: fileType
                        });
                     },
                     blobToFile(newBlob, fileName) {
                         let array = newBlob.type.split('/')
                         let file = new File([newBlob], fileName+'.'+array[1], {type: newBlob.type, lastModified: Date.now()});
                         

                         return file;
                     }
                 }
               })
           </script>
    </body>
</html>
